<template>
  <view class="document-list-page">
    <view class="list-container">
      <view class="list-header">
        <view class="page-title">文档列表</view>
        <button class="add-btn" @click="navigateToAdd">
          <icon type="plus" size="16"></icon> 新增文档
        </button>
		<button class="add-btn" @click="getDocumentList">
		  <icon type="plus" size="16"></icon> 刷新
		</button>
      </view>

      <!-- 文档列表表格 -->
      <view class="table-container">
        <view class="table-header">
          <view class="table-col col-id">ID</view>
          <view class="table-col col-name">文档名称</view>
          <view class="table-col col-type">文档类型</view>
          <view class="table-col col-created">创建时间</view>
          <view class="table-col col-status">状态</view>
          <view class="table-col col-action">操作</view>
        </view>

        <view class="table-body">
          <view 
            class="table-row" 
            v-for="(doc, index) in documentList" 
            :key="index"
          >
            <view class="table-col col-id">{{ doc.id }}</view>
            <view class="table-col col-name">
              <text v-if="doc.docName">{{ doc.docName }}</text>
              <text class="empty-text" v-else>未命名文档</text>
            </view>
            <view class="table-col col-type">{{ getDocTypeText(doc) }}</view>
            <view class="table-col col-created">{{ formatDate(doc.created_On) }}</view>
            <view class="table-col col-status">
              <view class="status-tag" :class="doc.is_Deleted === 0 ? 'status-active' : 'status-deleted'">
                {{ doc.is_Deleted === 0 ? '正常' : '已删除' }}
              </view>
            </view>
            <view class="table-col col-action">
              <button class="action-btn view-btn" @click="viewDocument(doc)">查看</button>
              <button class="action-btn delete-btn" @click="deleteDocument(doc.id)">删除</button>
			  <button class="action-btn edit-btn" @click="editAdmin(doc.id)">编辑</button>
            </view>
          </view>
        </view>

        <!-- 空状态 -->
        <view class="empty-state" v-if="documentList.length === 0 && !loading">
          <icon type="info" size="40" color="#ccc"></icon>
          <text class="empty-text">暂无文档数据</text>
        </view>

        <!-- 加载中状态 -->
        <view class="loading-state" v-if="loading">
          <loading></loading>
          <text class="loading-text">加载中...</text>
        </view>
      </view>

      <!-- 分页控件 -->
      <view class="pagination">
        <button 
          class="page-btn" 
          @click="changePage(currentPage - 1)" 
          :disabled="currentPage <= 1 || loading"
        >
          上一页
        </button>
        <view class="page-info">
          第 {{ currentPage }} 页 / 共 {{ totalPages }} 页
        </view>
        <button 
          class="page-btn" 
          @click="changePage(currentPage + 1)" 
          :disabled="currentPage >= totalPages || loading"
        >
          下一页
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      documentList: [], // 文档列表数据
      total: 0, // 总条数
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页条数
      totalPages: 0, // 总页数
      loading: false // 加载状态
    };
  },
  onLoad() {
    // 页面加载时获取文档列表
    this.getDocumentList();
  },
  onShow() {
    // 页面加载时获取文档列表
    this.getDocumentList();
  },
  methods: {
    // 获取文档列表
    getDocumentList() {
      this.loading = true;
      
      // 分页参数
      const params = {
        pageIndex: this.currentPage,
        pageSize: this.pageSize
      };
      
      // 实际接口请求示例（保留空位）
      uni.request({
        url: 'http://ziyan.xshhotels.cn:8981/api/QYWXDocument/PagingDocument',
        method: 'GET',
        data: params,
        success: (res) => {
          this.loading = false;
          if (res.data.success) {
            this.documentList = res.data.data.rows;
            this.total = res.data.data.total;
            this.totalPages = Math.ceil(this.total / this.pageSize);
          } else {
            uni.showToast({
              title: res.data.msg || '获取数据失败',
              icon: 'none'
            });
          }
        },
        fail: () => {
          this.loading = false;
          uni.showToast({
            title: '网络错误，请重试',
            icon: 'none'
          });
        }
      });
    },

    // 切换页码
    changePage(page) {
      if (page < 1 || page > this.totalPages) return;
      this.currentPage = page;
      this.getDocumentList();
    },

    // 格式化日期
    formatDate(dateString) {
      if (!dateString) return '-';
      const date = new Date(dateString);
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
    },

    // 获取文档类型文本（根据实际业务逻辑调整）
    getDocTypeText(doc) {
      // 这里简单根据URL判断类型，实际项目可能需要根据接口返回的类型字段判断
      if (doc.url.includes('smartsheet')) {
        return '智能表格';
      } else if (doc.url.includes('doc.weixin.qq.com')) {
        return '文档';
      }
      return '未知类型';
    },

    // 查看文档
    viewDocument(doc) {
      if (doc.url) {
		  window.open(doc.url)
        // 打开文档链接
        
      } else {
        uni.showToast({
          title: '文档链接不存在',
          icon: 'none'
        });
      }
    },
	
	// 新增编辑管理员跳转方法
	  editAdmin(docId) {
	    uni.navigateTo({
	      url: `/pages/DocumentAdmin/DocumentAdmin?docId=${docId}`
	    });
	  },

    // 删除文档
    deleteDocument(id) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除该文档吗？此操作不可撤销',
        success: (res) => {
          if (res.confirm) {
            this.loading = true;
			// 分页参数
			const params = {
			  id: id,
			};
            // 实际接口请求示例（保留空位）
            uni.request({
              url: 'http://ziyan.xshhotels.cn:8981/api/QYWXDocument/DeleteDocument',
              method: 'GET',
              data: params,
              success: (res) => {
                this.loading = false;
                if (res.data.success) {
					uni.showToast({
					  title: '删除成功',
					  icon: 'none'
					});
				this.getDocumentList();
				
                } else {
                  uni.showToast({
                    title: res.data.msg || '删除数据失败',
                    icon: 'none'
                  });
                }
              },
              fail: () => {
                this.loading = false;
                uni.showToast({
                  title: '网络错误，请重试',
                  icon: 'none'
                });
              }
            });

            /*
            uni.request({
              url: `http://ziyan.xshhotels.cn:8981/api/QYWXDocument/DeleteDocument?id=${id}`,
              method: 'DELETE',
              success: (res) => {
                this.loading = false;
                if (res.data.success) {
                  uni.showToast({
                    title: '删除成功',
                    icon: 'success'
                  });
                  // 重新获取列表数据
                  this.getDocumentList();
                } else {
                  uni.showToast({
                    title: res.data.msg || '删除失败',
                    icon: 'none'
                  });
                }
              },
              fail: () => {
                this.loading = false;
                uni.showToast({
                  title: '网络错误，请重试',
                  icon: 'none'
                });
              }
            });
            */
          }
        }
      });
    },

    // 跳转到新增文档页面
    navigateToAdd() {
      uni.navigateTo({
        url: '/pages/DocumentManager/DocumentManager'
      });
    }
  }
};
</script>

<style scoped>
.document-list-page {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding: 20px;
}

.list-container {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.add-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  background-color: #007aff;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.table-container {
  width: 100%;
  overflow-x: auto;
}

.table-header {
  display: flex;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e8e8e8;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s;
}

.table-row:hover {
  background-color: #fafafa;
}

.table-col {
  padding: 12px 16px;
  font-size: 14px;
  color: #333;
  word-break: break-all;
}

.col-id {
  flex: 0 0 180px;
}

.col-name {
  flex: 0 0 200px;
}

.col-type {
  flex: 0 0 120px;
}

.col-created {
  flex: 0 0 180px;
}

.col-status {
  flex: 0 0 100px;
}

.col-action {
  flex: 0 0 200px;
  display: flex;
  gap: 8px;
}

.status-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.status-active {
  background-color: #e6f7ed;
  color: #008000;
}

.status-deleted {
  background-color: #fff2e8;
  color: #ff4d4f;
}

.action-btn {
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
}

.view-btn {
  background-color: #e6f7ff;
  color: #1890ff;
  border: 1px solid #91d5ff;
}

.delete-btn {
  background-color: #fff1f0;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  color: #999;
}

.empty-text {
  color: #999;
  margin-top: 10px;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
}

.loading-text {
  color: #666;
  margin-top: 10px;
  font-size: 14px;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  gap: 16px;
}

.page-btn {
  padding: 6px 12px;
  background-color: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.page-btn:disabled {
  color: #ccc;
  cursor: not-allowed;
  background-color: #f5f5f5;
}

.page-info {
  font-size: 14px;
  color: #666;
}

/* 适配不同屏幕尺寸 */
@media (max-width: 768px) {
  .list-container {
    width: 100%;
  }
  
  .col-id, .col-created {
    flex: 0 0 140px;
  }
  
  .col-name {
    flex: 0 0 160px;
  }
}
.edit-btn {
  background-color: #fffbe6;
  color: #faad14;
  border: 1px solid #ffe58f;
}
</style>